<template>
  <div :class="{ 'widget-form-container': true, 'widget-app': showMobile }">
    <el-form
      :label-position="localData.labelPosition || 'right'"
      :label-width="localData.labelWidth ? `${localData.labelWidth}px` : '100px'"
      :label-suffix="localData.labelSuffix"
      :model="form"
      ref="widgetForm"
      size="default"
      :show-message="false"
      :class="{ 'bd-app': showMobile }"
    >
      <el-row :gutter="localData.gutter" :class="{ 'row-app': showMobile }">
        <widget-form-container
          v-model:data="localData"
          v-model:select="selectWidget"
          :attrList="attrList"
        />
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { randomString } from '@/utils/zmids'

export default {
  name: 'WidgetForm',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    select: {
      type: Object,
      default: () => {}
    },
    showMobile: {
      type: Boolean,
      default: false
    },
    attrList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectWidget: this.select,
      form: {},
      localData: {}
    }
  },
  watch: {
    select(val) {
      this.selectWidget = val
    },
    selectWidget: {
      handler(val) {
        this.$emit('update:select', val)
      },
      deep: true
    },
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal)
      },
      deep: true
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
:deep(.el-row) {
  display: block;
}
</style>
